<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="80%" destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false">
        <el-container>
            <el-header>
                <el-form-item label="订单详情" prop="remark">
                    <el-tag class="ml-2" type="success">状态</el-tag>
                </el-form-item>
                <div>
                    <el-button @click="visible=false" type="primary">修改生产信息</el-button>
                    <el-button @click="visible=false" type="primary">打印当前页</el-button>
                    <el-button @click="visible=false" type="primary">审批为已完成</el-button>
                    <el-button @click="visible=false" type="danger">删除</el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside>
                    <div class="detailImg">
                        <div class="chat">微信扫码查看</div>
                        <img src="../../../../public/img/auth_banner.jpg" alt="">
                    </div>
                </el-aside>
                <el-main>
                    <el-form ref="form" :model="form" label-width="100px" :disabled="mode=='show'">
                        <el-row :gutter="1"> 
                            <el-col :span="8">
                                <el-form-item label="供方货号" prop="remark">
                                    <el-input v-model="form.remark" readonly></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="毛种" prop="remark">
                                    <el-input v-model="form.remark" readonly></el-input>
                                </el-form-item>
                            </el-col>
                           <el-col :span="8">
                                <el-form-item label="下单日期" prop="remark">
                                    <el-input v-model="form.remark" readonly></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="1"> 
                            <el-col :span="8">
                                <el-form-item label="批次号" prop="remark">
                                    <el-input v-model="form.remark" readonly></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="颜色" prop="remark">
                                    <el-input v-model="form.remark" readonly></el-input>
                                </el-form-item>
                            </el-col>
                           <el-col :span="8">
                                <el-form-item label="交货日期" prop="remark">
                                    <el-input v-model="form.remark" readonly></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="1"> 
                            <el-col :span="8">
                                <el-form-item label="订单号" prop="remark">
                                    <el-input v-model="form.remark" readonly></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="下单人" prop="remark">
                                    <el-input v-model="form.remark" readonly></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="制单人" prop="remark">
                                    <el-input v-model="form.remark" readonly></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="1"> 
                            <el-col :span="8">
                                <el-form-item label="客户" prop="remark">
                                    <el-input v-model="form.remark" readonly></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="SKC" prop="remark">
                                    <el-input v-model="form.remark" readonly></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-main>
            </el-container>
            <el-tabs tab-position="top">
                <el-tab-pane label="1.生产制单">
                    <el-header v-if="mode!='show'">
                        <div>
                            <el-button type="primary">添加物料</el-button>
                            <el-button type="primary">调整物料仓库</el-button>
                            <el-button type="primary">提请采购物料</el-button>
                        </div>
                    </el-header>
                    <el-main>
                        <sc-form-table ref="table" v-model="form.list" :addTemplate="addTemplate" placeholder="暂无数据" hideAdd>
                            <el-table-column label="编号" prop="id" width="50" align="center"></el-table-column>
                            <el-table-column label="操作" width="130" align="center">
                                <template #default="scope">
                                    <div class="btnDisplay">
                                        <div class="btn" @click="handleModify(scope.$index,scope.row)">修改</div>
                                        <div class="btn" @click="handleDelete(scope.$index,scope.row)">删除</div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="名称" prop="name" width="100" align="center"></el-table-column>
                            <el-table-column label="规格型号" prop="goodsSpec" width="100" align="center"></el-table-column>
                            <el-table-column label="可用库存数" prop="useKuNum" width="100" align="center"></el-table-column>
                            <el-table-column label="所需数量" prop="useNum" width="100" align="center"></el-table-column>
                            <el-table-column label="所需费用" prop="useNum" width="100" align="center"></el-table-column>
                            <el-table-column label="备注" prop="usePrice" width="100" align="center"></el-table-column>
                        </sc-form-table>
                    </el-main>
                </el-tab-pane>
                <el-tab-pane label="2.物料明细">
                    <el-header v-if="mode!='show'">
                        <div>
                            <el-button type="primary">批量添加工序<el-icon class="el-icon--right"><el-icon-CaretBottom /></el-icon></el-button>
                            <el-button type="primary">添加内部工序<el-icon class="el-icon--right"><el-icon-CaretBottom /></el-icon></el-button>
                            <el-button type="primary">添加委外工序<el-icon class="el-icon--right"><el-icon-CaretBottom /></el-icon></el-button>
                        </div>
                    </el-header>
                    <el-main>
                    <sc-form-table ref="table" v-model="form.list" :addTemplate="addTemplate" placeholder="暂无数据" hideAdd>
                        <el-table-column label="编号" prop="id" width="50" align="center"></el-table-column>
                            <el-table-column label="操作" width="110" align="center">
                                <template #default="scope">
                                    <div class="btnDisplay">
                                        <div class="btn" @click="handleModify(scope.$index,scope.row)">修改</div>
                                        <div class="btn" @click="handleDelete(scope.$index,scope.row)">删除</div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="工序汇报" width="130" align="center">
                                <template #default="scope">
                                    <div class="btnDisplay">
                                        <div class="btn" @click="open(scope.$index,scope.row)">汇报</div>
                                        <div class="btn" @click="handleDelete(scope.$index,scope.row)">结束</div>
                                        <div class="btn" @click="handleDelete(scope.$index,scope.row)">详情</div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="执行顺序" prop="order" width="90" align="center"></el-table-column>
                            <el-table-column label="编号" prop="order" width="90" align="center"></el-table-column>
                            <el-table-column label="名称" prop="name" width="90" align="center"></el-table-column>
                            <el-table-column label="负责人" prop="head" width="90" align="center"></el-table-column>
                            <el-table-column label="工序汇报情况统计" align="center" v-if="type==0">
                                <el-table-column label="派工数" prop="order" width="65" align="center"></el-table-column>
                                <el-table-column label="合格数" prop="order" width="65" align="center"></el-table-column>
                                <el-table-column label="报废数" prop="order" width="65" align="center"></el-table-column>
                                <el-table-column label="剩余数" prop="order" width="65" align="center"></el-table-column>
                            </el-table-column>
                            <el-table-column label="工序状态" prop="category" width="90" align="center"></el-table-column>
                            <el-table-column label="工序单价" prop="price" width="90" align="center"></el-table-column>
                            <el-table-column label="所需费用" prop="usePrice" width="90" align="center"></el-table-column>
                            <el-table-column label="类别" prop="category" width="90" align="center"></el-table-column>
                            <el-table-column label="计费方式" prop="chargType" width="90" align="center"></el-table-column>
                            <el-table-column label="参考用时" prop="referTime" width="90" align="center"></el-table-column>
                            <el-table-column label="备注" prop="remark" width="90" align="center"></el-table-column>
                        </sc-form-table>
                    </el-main>
                
                </el-tab-pane>
                <el-tab-pane label="3.生产进度">
                    <sc-form-table ref="table" v-model="form.list" :addTemplate="addTemplate" placeholder="暂无数据" :hideAdd="mode=='show'">
                        <el-table-column label="费用名称" prop="useNum" width="150" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.remark" readonly></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="所需费用" prop="useNum" width="150" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.remark" readonly></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" prop="usePrice" width="150" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.remark" readonly></el-input>
                            </template>
                        </el-table-column>
                    </sc-form-table>
                </el-tab-pane>
                <el-tab-pane label="4.工序单价">
                    <el-header>
                        <div></div>
                        <div>
                            <el-button type="primary" @click="goDetail(scope.row, scope.$index)">修改工序</el-button>
                            <el-button type="primary" @click="goDetail(scope.row, scope.$index)">生产上数</el-button>
                            <el-button type="primary" @click="goDetail(scope.row, scope.$index)">提醒上数</el-button>
                        </div>
                    </el-header>
                    <scTable ref="table" :apiObj="apiObj" stripe remoteSort remoteFilter border :params="query">
                        <el-table-column fixed type="index" align="center" width="50"></el-table-column>
                        <el-table-column label="工序" prop="needle_seed_name" align="center"></el-table-column>
                        <el-table-column label="单价" prop="wool_seed" align="center"></el-table-column>
                        <el-table-column label="已完成/总数" prop="deliver_time" align="center"></el-table-column>
                        <el-table-column label="备注" prop="creator_name" align="center"></el-table-column>
                        <el-table-column label="员工上数详情" align="center">
                            <template #default="scope">
                                <el-button-group style="display:flex;flex-direction:column">
                                    <el-button text type="primary" size="small" @click="goDetail(scope.row, scope.$index)">修改</el-button>
                                </el-button-group>
                            </template>
                        </el-table-column>
                    </scTable>
                </el-tab-pane>
            </el-tabs>
            <el-footer>
                <div style="display:flex;justify-content: end;">
                    <el-button @click="visible=false" >取消</el-button>
                    <el-button :loading="isSaveing" @click="submit()">保存</el-button>
                    <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保存并审核</el-button>
                </div>
            </el-footer>
        </el-container>
	</el-dialog>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				mode: "add",
				titleMap: {
					add: '生产加工',
					show: '查看生产加工详情'
				},
				visible: true,
				isSaveing: false,
                grade:"潜力",
				//表单数据
				form: {
					id:"",
					remark: "",
                    overData: "",
                    goodsSpec: "",
                    unit: "",
                    produceNum: "",
                    specModel: "",
                    goods: "",
                    orderNo: "",
                    name:"",
                    list:[]
				},
                addTemplate:{
                    id:'',
                    name:'',
                    desc:'',
                    use:'',
                    number:'',
                    price:'',
                    remark:'',
                },
				cates: [],  //品牌
                Settlement:[],//结算方式
                muDan:[
                    {id:0,name:'否'},
                    {id:1,name:'是'},
                ],
			}
		},
		mounted() {
            this.getCate()
            this.getSettlement()
		},
		methods: {
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
			//表单提交方法
			submit(){
				this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
						var res  = [];
						if (this.form.id) {
							res = await this.$API.customer.getCustomerList.edit.post(this.form);
						}else{
							res = await this.$API.customer.getCustomerList.add.post(this.form);
						}
						this.isSaveing = false;
						if(res.code == 1){
							this.$emit('success', this.form, this.mode)
							this.visible = false;
							this.$message.success("操作成功")
						}else{
							this.$alert(res.message, "提示", {type: 'error'})
						}
					}else{
						return false;
					}
				})
			},
			//表单注入数据
			setData(data){
                console.log('data :>> ', data);
				// Object.assign(this.form, data)
			},
            // 获取品牌
            async getCate(){
				var res = await this.$API.customer.getBrand.lists.get();
				this.cates = res.data.rows;
			},
            // 获取结算方式
            async getSettlement(){
				var res = await this.$API.customer.getSettlement.get();
				this.Settlement = res.data;
			},
		}
	}
</script>

<style lang="scss">
.detailImg{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 10%;
    .chat{
        width: 20px;
        font-size: 20px;
    }
    img{
        width: 150px;
        height: 150px;
    }
}
</style>
